<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<button id='setting' class="mui-btn mui-pull-right">设置</button>
			<h1 class="mui-title">电子邮资明信片</h1>
		</header>
		<div class="mui-content">

			<div id="content" class="mui-content-padded">
				<div class="mui-input-row mui-search">
					<input id="dis" type="search" class="mui-input-clear mui-input-speech" placeholder="输入目的地,如：北京">
				</div>
				<h5 id="positionTag">为您找到附近的景点</h5>
				<ul id="scensData" class="mui-table-view mui-grid-view">
				</ul>
			</div>
		</div>
		<nav id="navs" class="mui-bar mui-bar-tab">
			<a id="homeNav" class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">主页</span>
			</a>
			<a id="scanNav" class="mui-tab-item">
				<span class="mui-icon iconfont icon-qrcode"></span>
				<span class="mui-tab-label">扫描</span>
			</a>
			<a id="diyNav" class="mui-tab-item">
				<span class="mui-icon iconfont icon-thin011mailenvelopeemailpostcard"></span>
				<span class="mui-tab-label">DIY</span>
			</a>
			<a id="myNav" class="mui-tab-item">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/wilddog.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var uid = null;
			var currentCity = null;
			 // 打开景点
			function gogo(k, aurl, lng, lat, name, cid) {
					mui.openWindow({
						id: 'page_card',
						url: 'cards/card.html',
						show: {
							autoShow: false
						},
						extras: {
							ak: k,
							aurl: aurl,
							lng: lng,
							lat: lat,
							name: name,
							cid: cid
						},
						styles: {
							top: '0px',
							bottom :'0px'
						},
						waiting:{
      						autoShow:true,
      						title:'正在加载...'
    					}
					});
				}
				// 清除所有子节点

			function clearAllNode(parentNode) {
					while (parentNode.firstChild) {
						var oldNode = parentNode.removeChild(parentNode.firstChild);
						oldNode = null;
					}
				}
				// 记录扫描历史信息

			function scanHistory(uid, cid, cname) {
					var scandRef = ref.child("scand");
					scandRef.push({
						uid: uid,
						cid: cid,
						cname: cname,
						ctime: new Date().getTime()
					});
				}
				// 扫描处理函数

			function scaned(t, r, f) {
					var cid = r;
					if (t == 'stcard') {
						mui.openWindow({
							id: 'st_payment',
							url: 'plus/payment.html',
							show: {
								autoShow: true
							},
							extras: {
								cid: r
							},
							styles: {
								top: '0px'
							}
						});
					} else if (t == 'mpcard') {
						// 查询当前明信片
						var cardsRef = ref.child("cards");
						cardsRef.orderByChild("cid").equalTo(cid).on("value", function(snapshot) {
							snapshot.forEach(function(data) {
								// 存储扫描过的明信片
								scanHistory(uid, cid, data.val().scensname);
								gogo(data.val().scensid, data.val().scensurl, data.val().scenslng, data.val().scenslat, data.val().scensname, data.val().cid);
							});
						});
					}
				}
				// --------------------------定位我的位置，并显示附近的景点

			function myCurrentLocation() {
					plus.nativeUI.showWaiting("正在定位...", {
						padlock: false
					});
					document.getElementById("positionTag").innerHTML = "正在定位当前位置...";
					plus.geolocation.getCurrentPosition(function(position) {
						var codns = position.coords; //获取地理坐标信息；
						var address = position.address;
						if (address) {
							var province = address.province;
							currentCity = address.city;
							document.getElementById("positionTag").innerHTML = "您所在的[" + province + "--" + currentCity + "]有如下景点：";
							showSences(currentCity);
							plus.nativeUI.closeWaiting();
						}
					}, function(e) {
						alert("获取定位位置信息失败：" + e.message);
						plus.nativeUI.closeWaiting();
					}, {
						provider: 'baidu'
					});
				}
			// 查询当前城市下所有景点
			function showSences(city) {
				var scensRef = ref.child("scens");
				scensRef.orderByChild("city").equalTo(city).on("value", function(snapshot) {
					var liContent = "";
					snapshot.forEach(function(data) {
						liContent += "<li class=\"mui-table-view-cell mui-media mui-col-xs-6\">";
						liContent += "						<a href=\"javascript:void(0);\" onclick=\"gogo('" + data.key() + "','" + data.val().article + "','" + data.val().lng + "','" + data.val().lat + "','" + data.val().name + "')\" >";
						liContent += "							<img class=\"mui-media-object\" src=\"" + data.val().smimgurl + "\">";
						liContent += "							<div class=\"mui-media-body\">" + data.val().name + "<\/div>";
						liContent += "						<\/a>";
						liContent += "					<\/li>";
						document.getElementById("scensData").innerHTML = liContent;
					});
				});
			}
			var authData = ref.getAuth();
			if (authData) {
				uid = authData.uid.substr(authData.uid.indexOf(':') + 1, authData.uid.length);
				console.log("User " + authData.uid + " is logged in with " + authData.provider);
			} else {
				console.log("User is logged out");
			}
			window.onload = function() {
				mui.plusReady(function() {
					myCurrentLocation();
					//关闭等待框
					plus.nativeUI.closeWaiting();
					//显示当前页面
					mui.currentWebview.show();
					var settingPage = mui.preload({
						"id": 'settingPage',
						"url": 'setting.html'
					});
					var myPage = mui.preload({
						"id": 'myPage',
						"url": 'my.html'
					});
									
					// ----------------------------- 主页按钮点击
					document.getElementById("homeNav").addEventListener('tap', function() {
						document.getElementById("dis").value="";
						myCurrentLocation();
					}, false);
					//------------------------------- 扫描邮资
					document.getElementById('scanNav').addEventListener('tap', function(event) {
						mui.openWindow({
							id: 'barcodescan',
							url: 'plus/barcode_scan.html',
							show: {
								autoShow: false,
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: true
							}
						});
					}, false);
					// ----------------------------- DIY明信片按钮
					document.getElementById("diyNav").addEventListener('tap', function() {
						plus.nativeUI.toast('制作DIY明信片(暂未开放)');
					}, false);
					// ----------------------------- 设置按钮
					document.getElementById('setting').addEventListener('tap', function(event) {
						mui.openWindow({
							id: 'settingPage',
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					});
					// ----------------------------- 我的按钮
					document.getElementById("myNav").addEventListener('tap', function() {
						mui.openWindow({
							id: 'myPage',
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);
					// ----------------------------- 目的地搜索按钮
					document.getElementById("dis").addEventListener('change', function(e) {
						var curCity = e.target.value;
						if (curCity != null && curCity != "") {
							curCity = curCity.replace(/。/g, '');
							console.log("检索的城市为："+curCity);
							showSences(curCity);
						}else{
							showSences(currentCity);
						}
					}, false);
					
					// ----------------------------- 推出按钮
					mui.oldBack = mui.back;
					var backButtonPress = 0;
					mui.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}
		</script>
	</body>

</html>